<template>
  <div class="block">
    <h4><img :src="icon" alt="" /> 我的产品</h4>
    <ul class="clearfix" v-loading="loading">
      <li v-for="(item, i) in appList" :key="i">
        <img :src="item.app_img" alt="" />
        <span>{{ item.app_name }} (个人)</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { getUserApp, getImg } from "@/service/app";
export default {
  name: "myproduct",
  data() {
    return {
      loading: true,
      icon: require("@/assets/images/control/collect-icon.b2026723.png"),
      appList: null,
      imgurl: null,
      // user: "admin",
    };
  },
  methods: {
    queryData() {
      this.loading = true;
      getUserApp().then((res) => {
        let data = res.data.dataPack.rows;
        for (let i = 0; i < data.length; i++) {
          if (data[i].app_img) {
            data[i].app_img = `${this.imgurl}${data[i].app_img.split(";")[2]}`;
          } else {
            data[i].app_img =
              "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
          }
        }
        this.appList = data;
        this.loading = false;
        // setTimeout(() => {
        //   this.loading = false;
        // }, 10000);
      });
    },
  },
  created() {
    this.queryData();
    getImg().then((res) => {
      this.imgurl = res.data;
    });
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  width: 100%;
  height: 100%;
  padding: 10px;
  padding-right: 0;

  * {
    margin: 0;
    padding: 0;
  }
  h4 {
    display: flex;
    align-items: center;
    font-weight: normal;
    height: 10%;
    font-size: 15px;
    > img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
  ul {
    width: 100%;
    height: 90%;
    list-style: none;
    overflow: hidden;
    li {
      margin-bottom: 10px;
      margin-right: 10px;
      float: left;
      width: calc(25% - 10px);
      height: calc(50% - 10px);
      padding: 5px;
      border: 1px solid #eaeaea;
      box-shadow: #aaa 0 0 10px -6px;

      &:nth-of-type(n * 4) {
        margin-right: 0;
      }
      img {
        width: 100%;
        height: 78%;
        display: block;
      }
      span {
        width: 100%;
        height: 22%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style>